<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="./src/assets/logo/title-logo.ico" />
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
        <title>多优多后台管理系统</title>
        <style>
            html,
            body,
            #app {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            .sk-cube-grid {
                position: relative;
                width: 4em;
                height: 4em;
                margin: auto;
                top: 50%;
                transform: translateY(-50%);
            }
            .sk-cube {
                width: 33%;
                height: 33%;
                background-color: #b63f51;
                float: left;
                animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
            }
            .sk-cube-1 {
                animation-delay: 0.2s;
            }
            .sk-cube-2 {
                animation-delay: 0.3s;
            }
            .sk-cube-3 {
                animation-delay: 0.4s;
            }
            .sk-cube-4 {
                animation-delay: 0.1s;
            }
            .sk-cube-5 {
                animation-delay: 0.2s;
            }
            .sk-cube-6 {
                animation-delay: 0.3s;
            }
            .sk-cube-7 {
                animation-delay: 0s;
            }
            .sk-cube-8 {
                animation-delay: 0.1s;
            }
            .sk-cube-9 {
                animation-delay: 0.2s;
            }
            @keyframes sk-cube-grid-scale-delay {
                0%,
                70%,
                100% {
                    transform: scale3D(1, 1, 1);
                }
                35% {
                    transform: scale3D(0, 0, 1);
                }
            }
        </style>
    </head>

    <body>
        <div id="app">
            <div class="sk-cube-grid">
                <div class="sk-cube sk-cube-1"></div>
                <div class="sk-cube sk-cube-2"></div>
                <div class="sk-cube sk-cube-3"></div>
                <div class="sk-cube sk-cube-4"></div>
                <div class="sk-cube sk-cube-5"></div>
                <div class="sk-cube sk-cube-6"></div>
                <div class="sk-cube sk-cube-7"></div>
                <div class="sk-cube sk-cube-8"></div>
                <div class="sk-cube sk-cube-9"></div>
            </div>
        </div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>
